<template>
  <!-- 订单管理页 -->
  <div>
    <!-- {{ orderData }} -->
    <div class="header">
      <el-tabs v-model="chooseStatus" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="all"></el-tab-pane>
        <el-tab-pane label="待支付" name="待支付"></el-tab-pane>
        <el-tab-pane label="待派单" name="待派单"></el-tab-pane>
        <el-tab-pane label="待接单" name="待接单"></el-tab-pane>
        <el-tab-pane label="待服务" name="待服务"></el-tab-pane>
        <el-tab-pane label="待确认" name="待确认"></el-tab-pane>
        <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="content">
      <el-table :data="getData" style="width: 100%">
        <el-table-column prop="id" label="订单编号" align="center">
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" align="center">
          <template slot-scope="scope">
            <span>{{
              new Date(parseInt(scope.row.orderTime))
                .toLocaleString()
                .replace(/:\d{1,2}$/, " ")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column  label="总价" align="center">
          <template slot-scope="scope">
            <span style="color:red; font-size:18px;">{{scope.row.total}}</span><span> 元</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == '待派单'">{{
              scope.row.status
            }}</el-tag>
            <el-tag type="warning" v-else-if="scope.row.status == '待接单'">{{
              scope.row.status
            }}</el-tag>
            <el-tag type="info" v-else-if="scope.row.status == '待服务'">{{
              scope.row.status
            }}</el-tag>
            <el-tag type="info" v-else-if="scope.row.status == '已完成'">{{
              scope.row.status
            }}</el-tag>
             <el-tag type="info" v-else-if="scope.row.status == '待确认'">{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="customerId" label="顾客ID " align="center">
        </el-table-column>
        <el-table-column prop="employeeId" label="员工ID" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="goToDetail(scope.row.id)"
              style="color: #000"
              >详情</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.status == '待接单'"
              style="color: red"
              @click="cancle(scope.row.id)"
              >取消派单</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.status == '待派单'"
              style="color: green"
              @click="dispaBtn(scope.row.orderLines[0].orderId)"
              >派单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer"></div>
    <!-- 模态框 -->
    <div class="dia">
      <el-dialog
        title="派单"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <el-radio
          v-for="index in employeeData"
          :key="index.id"
          :label="index.id"
          v-model="orderData.waiterId"
          border
          >{{ index.username }}</el-radio
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogBtn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="changePage">
      <div class="paginetion">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="sentData.page"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="sentData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import { showFileURL, uploadFileURL } from "@/utils/config";
export default {
  data() {
    return {
      // 选中的员工
      waiterId: "",
      orderData: {
        waiterId: "",
        orderId: "",
      },

      centerDialogVisible: false,
      // 员工数组(派单)
      employeeData: "",
      chooseStatus: "",
      getData: [],
      sentData: {
        page: 1,
        pageSize: 6,
        status: "",
      },
    };
  },
  computed: {},
  methods: {
    handleSizeChange(val) {
    this.sentData.pageSize = val 
    this.sentData.page = 1;
    this.getAllOrder()
    // console.log(val);
    // console.log(val);
    },
    handleCurrentChange(val) {
    // console.log("zzzz");
    this.sentData.page = val;
    this.getAllOrder()
    console.log(val);
    },
    async cancle(id) {
      console.log(id);
      let res = await get("/order/cancelSendOrder", { orderId: id });
      // console.log(res);
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getAllOrder();
      } else {
        this.$message.error(res.message);
      }
    },
    // 模态框确定派单
    async dialogBtn() {
      let res = await get("/order/sendOrder", this.orderData);
      console.log(res);
      this.centerDialogVisible = false;
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getAllOrder();
      } else {
        this.$message.error(res.message);
      }
    },
    // 点击详情跳转
    goToDetail(id) {
      this.$router.push({
        path: "/admin/order/Details",
        query: {
          thisId: id,
        },
      });
    },
    //点击派单按钮：
    dispaBtn(id) {
      this.orderData.orderId = id;
      this.centerDialogVisible = true;
    },
    // 查询员工
    async getEmp() {
      // let res = get("/order/sendOrder");
      let res = await get("/baseUser/pageQuery", {
        page: 1,
        pageSize: 100,
        roleId: 1,
      });
      this.employeeData = res.data.list;
      // console.log(res.data.list);
    },
    async getAllOrder() {
      for (const key in this.sentData) {
        if (!this.sentData[key]) {
          delete this.sentData[key];
        }
      }
      let res = await get("/order/pageQuery", this.sentData);
      this.getData = res.data.list;
      // console.log(res.data.list);
    },
    handleClick(tab, event) {
      // console.log(tab.name);
      if (tab.name == "all") {
        this.sentData.status = "";
        this.getAllOrder();
      } else if (tab.name == "待支付") {
        this.sentData.status = "待支付";
        this.getAllOrder();
      } else if (tab.name == "待派单") {
        this.sentData.status = "待派单";
        this.getAllOrder();
      } else if (tab.name == "待服务") {
        this.sentData.status = "待服务";
        this.getAllOrder();
      } else if (tab.name == "待确认") {
        this.sentData.status = "待确认";
        this.getAllOrder();
      } else if (tab.name == "已完成") {
        this.sentData.status = "已完成";
        this.getAllOrder();
      } else if (tab.name == "待接单") {
        this.sentData.status = "待接单";
        this.getAllOrder();
      }
    },
  },
  created() {
    this.getAllOrder();
    this.getEmp();
  },
  mounted() {},
};
</script>
<style scoped>
.paginetion {
  position: fixed;
  bottom: 40px;
  right: 20px;
}
</style>